<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RustU</title>
        <link rel="stylesheet" href="styles.css" />
        <link
            rel="stylesheet"
            type="text/css"
            href="/assets/css/bootstrap.min.css"
        />
        <script
            type="text/javascript"
            src="/assets/js/bootstrap.bundle.min.js"
        ></script>
        <style>
            .content-wrap {
                min-height: calc(
                    100% - 80px
                ); /* 60px是footer的高度，可根据实际情况调整 */
                margin-bottom: -80px; /* 负margin等于footer的高度，避免内容被footer遮挡 */
            }

            html,
            body {
                height: 100%;
                margin: 0;
                /*background-image: linear-gradient(
                    -225deg,
                    #231557 0%,
                    #44107a 29%,
                    #ff1361 67%,
                    #fff800 100%
                );
                color: white;*/
            }

            p {
                overflow-wrap: break-word; /* 允许长单词换行到下一行 */
            }

            footer {
                height: 100px; /* 设置footer的高度 */
                text-align: center;
                padding: 20px 0;
                position: relative;
                margin-top: 80px; /* 与min-height一起确保footer在内容不足时也能置底 */
            }

            .move-trans-toLeft {
                animation-duration: 1.5s;
                animation-name: slidein-toLeft;
            }

            @keyframes slidein-toLeft {
                from {
                    margin-left: 100%;
                    width: 200%;
                }

                to {
                    margin-left: 0%;
                    width: 100%;
                }
            }

            .move-trans-toRight {
                animation-duration: 1.5s;
                animation-name: slidein-toRight;
            }

            @keyframes slidein-toRight {
                from {
                    margin-left: -100%;
                    width: 200%;
                }

                to {
                    margin-left: 0%;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body class="mt-5">
        <div class="container content-wrap">
            <div class="row move-trans-toLeft">
                <div class="col">
                    <h4 class="position-relative top-0 end-0">{{title}}</h4>
                </div>
            </div>
            <hr />
            <div class="row move-trans-toLeft">
                <div class="col" id="content" class="move-trans-toLeft"></div>
            </div>
        </div>

        <footer>
            <p class="move-trans-toRight">
                粤公网安备44011802000978号 ICP备案： 粤ICP备2024315825号-1
                &copy; 2024 你我同锈. All rights reserved.
            </p>
        </footer>

        <script
            type="text/javascript"
            src="/assets/js/showdown.min.js"
        ></script>
        <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"
        ></script>
        <script>
            /*
            window.addEventListener("load", function () {
                var converter = new showdown.Converter();
                var text = `{{content}}`;
                var html = converter.makeHtml(text);
                console.log(html);
                document.getElementById("content").innerHTML = html;
            });
             */
            //手工处理，把特殊符号ascii 转成对应的符号
            function decodeHtmlEntities(encodedString) {
                const parser = new DOMParser();
                const dom = parser.parseFromString(encodedString, "text/html");
                return dom.documentElement.textContent;
            }

            window.addEventListener("load", function () {
                var text = `{{content}}`; // 这个content值来自后端。
                var originText = decodeHtmlEntities(text);
                const htmlContent = marked.parse(originText);
                console.log(htmlContent);
                document.getElementById("content").innerHTML = htmlContent;
            });
        </script>
    </body>
</html>
